<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getReleaseList"
        :data-callback="dataCallback"
        :init-param="initParam"
        row-key="eno"
      >
        <template #tableHeader="scope">
          <div style="display: flex">
            <el-button type="primary" plain @click="addReleaseBtn" v-auth="'add'">新增</el-button>
            <el-button
              type="danger"
              :disabled="!scope.isSelected"
              v-auth="'delete'"
              plain
              @click="delSelectItem(scope.selectedList)"
            >
              删除
            </el-button>
          </div>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="seeDetails(scope.row)" v-auth="'view'">查看</el-button>
          <el-button type="primary" link :icon="EditPen" @click="editEvent(scope.row)" v-auth="'edit'">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteItem(scope.row)" v-auth="'delete'">删除</el-button>
        </template>
      </ProTable>
      <el-drawer v-model="dialogVisible" direction="rtl" size="1000" :title="titleText" @close="handleClose">
        <div>
          <el-button type="primary" :icon="View" @click="submitRelease">保存</el-button>
          <el-button type="primary" :icon="EditPen" @click="dialogVisible = false">返回列表</el-button>
        </div>
        <div style="display: flex">
          <div>
            <h3>基本信息</h3>
            <el-form v-model="formData" label-position="left" style="width: 260; margin-right: 10px" label-width="100px">
              <el-form-item label="所属客户" required>
                <el-input disabled v-model="formData.company" placeholder="请输入知识标题" style="width: 200px" />
              </el-form-item>
              <el-form-item label="发布分类" required>
                <el-cascader
                  v-model="releaseSelectValue"
                  :options="releaseSelectList"
                  :show-all-levels="false"
                  placeholder=""
                  @update:model-value="changerelease"
                  :props="props1"
                />
              </el-form-item>
              <el-form-item label="标题" required>
                <el-input v-model="formData.title" placeholder="请输入发布标题" style="width: 200px" />
              </el-form-item>
              <el-form-item label="项目名称" required>
                <el-input v-model="formData.project" />
              </el-form-item>
              <el-form-item label="指派技术员" required>
                <el-input
                  v-model="formData.assigneeName"
                  @click="dialogAssignee = true"
                  placeholder="请选择技术员"
                  style="width: 200px"
                />
              </el-form-item>
              <el-dialog title="选择技术员" v-model="dialogAssignee">
                <div :style="{ height: '500px' }">
                  <Userselect @send-data="sendAssigneeId" />
                </div>
              </el-dialog>
              <el-form-item label="发布时间">
                <el-date-picker
                  v-model="releaseDate"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  value-format="YYYY-MM-DD"
                  style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="计划时间">
                <el-date-picker
                  v-model="planDate"
                  type="date"
                  placeholder="选择日期"
                  size="default"
                  value-format="YYYY-MM-DD"
                  style="width: 180px"
                />
              </el-form-item>
              <el-form-item label="版本">
                <el-input v-model="formData.version" placeholder="请输入版本" style="width: 200px" />
              </el-form-item>
              <el-form-item label="阶段">
                <el-input v-model="formData.stage" placeholder="请输入阶段" style="width: 200px" />
              </el-form-item>
              <el-form-item label="优先级">
                <el-select
                  v-model="proirity"
                  placehoder="请选择"
                  size="large"
                  style="width: 180px; margin-right: 20px"
                  @change="selectActionType"
                >
                  <el-option v-for="item in selectProirity" :key="item.dcode" :label="item.dname" :value="item.dcode" />
                </el-select>
              </el-form-item>
              <el-form-item label="附件">
                <el-button type="primary" @click="addAttachment">选择附件</el-button>
              </el-form-item>
              <el-form-item label="已上传附件">
                <p v-for="(item, index) in fileList" :key="item.aid">
                  <span>
                    <a :href="`/api/attachment!download.action?downloadAttachmentId=${item.aid}`">
                      {{ item.attachmentName }}
                    </a>
                  </span>
                  <span style="margin-left: 10px" @click="delFileOption(item.aid, index)">删除</span>
                </p>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <h3>内容描述</h3>
            <WangEditor v-model:value="content" height="400px" width="300px" />
          </div>
        </div>
      </el-drawer>
      <el-drawer v-model="dialogVisible2" direction="rtl" size="1000" :title="titleText" @close="handleCloseDetail">
        <div class="operationBox" style="position: relative">
          <div class="processBtn">
            <span>流程操作：</span>
            <el-button
              type="primary"
              style="margin-right: 10px"
              @click="dialogSendAssignee = true"
              v-if="userRole.includes('ROLE_SYSADMIN') && formDataDetail.statusCode !== 'release_close'"
            >
              指派技术员
            </el-button>
            <el-dialog v-model="dialogSendAssignee" title="指派到技术员">
              <div>
                <el-form v-model="assigneeForm" label-position="left" label-width="100px">
                  <el-form-item label="指派技术员">
                    <el-input
                      v-model="assigneeForm.assigneeName"
                      @click="getUser('指派技术员')"
                      placeholder="请选择技术员"
                      style="width: 200px"
                    />
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input v-model="assigneeForm.remark" placeholder="请输入备注" type="textarea" style="width: 200px" />
                  </el-form-item>
                  <el-form-item label="操作">
                    <el-button type="primary" @click="sendToTec">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-dialog>
            <el-dialog v-model="dialogAssigneeTable" title="选择技术员">
              <ProTable
                ref="userProTable"
                :columns="userColumns"
                :request-api="getUserList"
                :data-callback="dataCallback"
                :request-auto="false"
                :init-param="userListInitParam"
              >
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button type="primary" link :icon="Select" @click="chooseUser('指派技术员', scope.row)">选择</el-button>
                </template>
              </ProTable>
            </el-dialog>
            <el-button
              type="primary"
              @click="reAssignUserBtn"
              v-if="
                formDataDetail.pid !== '' &&
                userRole.includes('ROLE_SYSADMIN') &&
                formDataDetail.statusCode !== 'release_close' &&
                formDataDetail.statusCode !== 'release_processReopen'
              "
              style="margin-right: 10px"
            >
              任务重新指派
            </el-button>
            <el-dialog title="任务重新指派" v-model="dialogTaskResent">
              <div>
                <el-form v-model="reAssigneeForm" label-position="left" label-width="100px">
                  <el-form-item label="指派技术员">
                    <el-input
                      v-model="reAssigneeForm.assigneeName"
                      @click="getUser('重新指派')"
                      placeholder="请选择技术员"
                      style="width: 200px"
                    />
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input v-model="reAssigneeForm.remark" placeholder="请输入备注" type="textarea" style="width: 200px" />
                  </el-form-item>
                  <el-form-item label="操作">
                    <el-button type="primary" @click="subResent">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-dialog>
            <el-dialog v-model="dialogReAssigneeTable" title="选择技术员-重新指派">
              <ProTable
                ref="userProTable2"
                :columns="userColumns"
                :request-api="getUserList"
                :data-callback="dataCallback"
                :request-auto="false"
                :init-param="userListInitParam"
              >
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button type="primary" link :icon="Select" @click="chooseUser('重新指派', scope.row)">选择</el-button>
                </template>
              </ProTable>
            </el-dialog>
            <!--  -->
            <el-button
              type="primary"
              @click="startProcess"
              style="margin-right: 10px"
              v-if="
                assigneeName === userStore.userInfo.fullName &&
                (formDataDetail.statusCode === 'release_new' || formDataDetail.statusCode === 'release_processReopen') &&
                formDataDetail.pid === ''
              "
            >
              开启流程
            </el-button>
            <el-dialog title="开启流程" v-model="dialogOpenProcess">
              <div>
                <el-form v-model="openUserForm" label-position="left" label-width="100px">
                  <el-form-item label="技术员">
                    <el-input v-model="openUserForm.assigneeName" disabled placeholder="请选择技术员" style="width: 200px" />
                  </el-form-item>
                  <el-form-item label="处理备注">
                    <el-input v-model="openUserForm.remark" placeholder="请输入备注" type="textarea" style="width: 200px" />
                  </el-form-item>
                  <el-form-item label="操作">
                    <el-button type="primary" @click="openProcess">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-dialog>
            <template v-if="assigneeName === userStore.userInfo.fullName && formDataDetail.pid != ''">
              <el-button
                type="primary"
                style="margin-right: 10px"
                @click="actionProcess(item)"
                v-for="item in processBtn"
                :key="item"
              >
                {{ item }}
              </el-button>
            </template>
            <el-dialog v-model="dialogActionProcess" :title="actionTitle" @close="closeActionProcess">
              <el-form v-model="ActionUserForm" label-position="left" label-width="100px">
                <!-- <el-form-item label="技术组">
                  <el-cascader
                    v-model="GroupSelectValue"
                    :options="groupSelectList"
                    :show-all-levels="false"
                    placeholder="选择技术组"
                    :disabled="Gdisbled"
                    clearable
                    @update:model-value="changerGroup"
                    :props="props2"
                  />
                  
                </el-form-item> -->
                <el-form-item label="技术组">
                  <el-input
                    style="width: 200px"
                    v-model="ActionUserForm.groupName"
                    placeholder="请选择指派组"
                    :disabled="Gdisbled"
                    clearable
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    type="primary"
                    :icon="Search"
                    :disabled="Gdisbled"
                    @click="selectDepartment('ActionUserForm.assigneeGroupNo', '请选择指派组')"
                  ></el-button>
                </el-form-item>
                <el-form-item label="技术员">
                  <el-input
                    v-model="ActionUserForm.assigneeName"
                    :disabled="Udisbled"
                    placeholder="请选择技术员"
                    style="width: 200px"
                    @click="getActionUser"
                  />
                </el-form-item>
                <el-form-item label="处理备注">
                  <el-input v-model="ActionUserForm.remark" placeholder="请输入备注" type="textarea" style="width: 200px" />
                </el-form-item>
                <el-form-item label="操作">
                  <el-button type="primary" @click="subActionProcess">提交</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-dialog v-model="dialogActionAssigneeTable" title="选择技术员">
              <ProTable
                ref="userProTable"
                :columns="userColumns"
                :request-api="getUserList"
                :data-callback="dataCallback"
                :request-auto="false"
                :init-param="userListInitParam"
              >
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button type="primary" link :icon="Select" @click="chooseActionUser(scope.row)">选择</el-button>
                </template>
              </ProTable>
            </el-dialog>
            <!--  -->
            <el-button
              type="primary"
              @click="reStartDialog = true"
              style="margin-right: 10px"
              v-if="formDataDetail.statusCode === 'release_close'"
            >
              重新开启
            </el-button>
            <el-dialog title="重新开启" v-model="reStartDialog">
              <el-form v-model="reStartForm" label-position="left" label-width="100px">
                <el-form-item label="处理备注">
                  <el-input v-model="reStartForm.remark" placeholder="请输入备注" type="textarea" style="width: 200px" />
                </el-form-item>
                <el-form-item label="操作">
                  <el-button type="primary" @click="subReStartProcess">提交</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
          <el-dropdown style="position: absolute; top: 0; right: 1%">
            <div class="el-dropdown-link">
              <el-button type="primary" plain>
                <span>更多操作</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- <el-dropdown-item @click="showSendMailMask"> 编辑 </el-dropdown-item> -->
                <el-dropdown-item @click="getFlowChart">流程跟踪</el-dropdown-item>
                <!-- <el-dropdown-item @click="showAddProblemMask">发布工单</el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div style="display: flex; margin-top: 10px">
          <div style="width: 39%">
            <h3>基本信息</h3>
            <div style="width: 100%; margin-top: 10px; margin-right: 10px">
              <p class="item">
                <span class="item_label">所属客户</span>
                <span class="item-content">{{ formDataDetail.companyName }}</span>
              </p>
              <p class="item">
                <span class="item_label">编号</span>
                <span class="item-content">{{ formDataDetail.eventCode }}</span>
              </p>
              <p class="item">
                <span class="item_label">分类</span>
                <span class="item-content">{{ formDataDetail.ecategoryName }}</span>
              </p>
              <p class="item">
                <span class="item_label">标题</span>
                <span class="item-content">{{ formDataDetail.etitle }}</span>
              </p>
              <p class="item">
                <span class="item_label">描述</span>
                <span
                  class="item-content"
                  v-html="formDataDetail.edesc"
                  @click="previewImage"
                  style="word-break: break-all"
                ></span>
              </p>
              <p class="item">
                <span class="item_label">项目名称</span>
                <span class="item-content">{{ formDataDetail.project }}</span>
              </p>
              <p class="item">
                <span class="item_label">状态</span>
                <span class="item-content">{{ formDataDetail.statusName }}</span>
              </p>
              <p class="item">
                <span class="item_label">指派技术员</span>
                <span class="item-content">{{ formDataDetail.assigneeName }}</span>
              </p>
              <p class="item">
                <span class="item_label">发布时间</span>
                <span class="item-content">{{ formDataDetail.releaseDate }}</span>
              </p>
              <p class="item">
                <span class="item_label">计划时间</span>
                <span class="item-content">{{ formDataDetail.planDate }}</span>
              </p>
              <p class="item">
                <span class="item_label">版本</span>
                <span class="item-content">{{ formDataDetail.version }}</span>
              </p>
              <p class="item">
                <span class="item_label">阶段</span>
                <span class="item-content">{{ formDataDetail.stage }}</span>
              </p>
              <p class="item">
                <span class="item_label">发布人</span>
                <span class="item-content">{{ formDataDetail.createdByName }}</span>
              </p>
              <p class="item" style="border-bottom: 1px solid #cbcaca">
                <span class="item_label">优先级</span>
                <span class="item-content">{{ formDataDetail.priorityName }}</span>
              </p>
            </div>
          </div>
          <div style="width: 60%">
            <h3>详细信息</h3>
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
              style="height: 519px; padding: 0 10px; margin-top: 10px; border: 1px solid #cbcaca"
            >
              <el-tab-pane label="附件" name="first">
                <p v-for="(item, index) in fileList" :key="item.aid">
                  <span>
                    <a :href="`/api/attachment!download.action?downloadAttachmentId=${item.aid}`">
                      {{ item.attachmentName }}
                    </a>
                  </span>
                  <span style="margin-left: 10px" @click="delFileOption(item.aid, index)">删除</span>
                </p>
              </el-tab-pane>
              <el-tab-pane label="发布计划" name="second">
                <el-form v-model="formDataDetail" label-position="left" style="width: 260" label-width="100px">
                  <el-form-item label="计划描述">
                    <el-input v-model="formDataDetail.solutions" type="textarea" />
                  </el-form-item>
                  <el-form-item label="操作">
                    <el-button type="primary" @click="subSolutions">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-drawer>
    </div>
    <ImportExcel ref="dialogRef" />
    <el-dialog v-model="previewImg" title="图片预览" fullscreen>
      <img :src="previewImgUrl" />
    </el-dialog>
    <el-dialog v-model="dialogFlowChart" title="流程跟踪" width="80%">
      <div v-html="flowChart"></div>
    </el-dialog>
    <!-- 选择部门 -->
    <SelectDepartment ref="selectDepartmentMask" :title="selectDepartmentTitle" @change="departmentChange"></SelectDepartment>
  </div>
</template>
<script setup lang="ts" name="releaseManagement">
import { ref, reactive, onMounted, toRefs, watch, h } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, View, Search, Select } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import {
  getReleaseList,
  uploadFile,
  getPriority,
  getReleaseType,
  addRelease,
  editRelease,
  delRelease,
  getReleaseInfo,
  submitReleaseInfo,
  findFile,
  delFile,
  getAssignUser,
  getUserList,
  assignUser,
  reAssignUserApi,
  reAssignUser,
  getOpenUser,
  openProcessAction,
  actionProcessApi,
  reStartProcess,
  getProcessInfo,
  editAddAttachment
} from "@/api/modules/releaseMangement";
import ImportExcel from "@/views/tools/uploadFile/index.vue";
import WangEditor from "@/components/WangEditor/index.vue";
import type { FormProps, TabsPaneContext } from "element-plus";
import Userselect from "@/views/tools/userselect/index.vue";
import { processDetail } from "@/api/modules/common";
import { getUserDepartment } from "@/api/modules/user";
import SelectDepartment from "@/components/SelectDepartment/SelectDepartment.vue";
onMounted(() => {
  proTable.value?.getTableList();
  getPriorityList();
  getReleaseTypeList();
  getGroupList();
});
const userStore = useUserStore();
console.log(userStore);
const userRole = userStore.userInfo.roleCode;
const username = userStore.username;
const initParam = reactive({
  loginName: username
});
const labelPosition = ref<FormProps["labelPosition"]>("right");
// ProTable 实例
const proTable = ref<ProTableInstance>();
// 表格配置项
const columns = reactive<ColumnProps[]>([
  { type: "selection", fixed: "left" },
  { prop: "eno", label: "ID", fixed: "left" },
  { prop: "companyName", label: "所属客户" },
  { prop: "eventCode", label: "编号" },
  { prop: "etitle", label: "标题" },
  { prop: "ecategoryName", label: "分类" },
  { prop: "priorityName", label: "优先级" },
  { prop: "project", label: "项目名称" },
  { prop: "endPlanTime", label: "项目时间" },
  {
    prop: "createTime",
    label: "创建时间"
  },
  {
    prop: "closeTime",
    label: "关闭时间"
  },
  {
    prop: "createdByName",
    label: "项目人"
  },
  {
    prop: "assigneeName",
    label: "指派到技术员"
  },
  {
    prop: "statusName",
    label: "状态"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 230 }
]);
const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
//选择用户
const dialogAssignee = ref(false);
const sendAssigneeId = data => {
  dialogAssignee.value = false;
  formData.assigneeName = data.fullName;
  assigneeId.value = data.userId;
};
//添加编辑表单
const formData = reactive({
  company: userStore.userInfo.companyName,
  title: "",
  project: "",
  assigneeName: "",
  version: "",
  stage: ""
});
const releaseDate = ref("");
const planDate = ref("");
const releaseSelectList = ref<any>([]);
const releaseCategoryNo = ref("");
const releaseSelectValue = ref();
const assigneeId = ref("");
const props1 = {
  checkStrictly: true,
  label: "data",
  value: "attr"
};
const content = ref("");
//获取发布分类
const getReleaseTypeList = async () => {
  const res = (await getReleaseType()) as any;
  console.log(res);
  releaseSelectList.value = res.children;
};
const proirity = ref("");
const selectProirity = ref<any>([]);
//获取优先级
const getPriorityList = async () => {
  const res = await getPriority();
  console.log(res);
  selectProirity.value = res;
};
const selectActionType = e => {
  console.log(e);
};
const changerelease = (val: any) => {
  console.log(val);
  releaseCategoryNo.value = val[0].id;
};
const handleClose = () => {
  proTable.value?.getTableList();
  formData.title = "";
  formData.project = "";
  formData.assigneeName = "";
  formData.version = "";
  formData.stage = "";
  content.value = "";
  releaseCategoryNo.value = "";
  proirity.value = "";
  attachmentStr.value = "";
  releaseDate.value = "";
  planDate.value = "";
  assigneeId.value = "";
  releaseSelectValue.value = [];
  fileList.value = [];
  attachmentStr.value = "";
};
const handleCloseDetail = () => {
  fileList.value = [];
  attachmentStr.value = "";
};
const submitRelease = async () => {
  console.log("submitRelease");
  if (formData.title === "") {
    // ElNotification({
    //   message: h("i", { style: "color: red" }, "请输入标题"),
    //   customClass: "http-message"
    // });

    ElMessage({
      customClass: "customMsgCls",
      message: "请输入标题",
      type: "error",
      appendTo: document.body
    });

    return;
  }
  if (content.value === "") {
    // ElNotification({
    //   message: h("i", { style: "color: red" }, "请输入内容"),
    //   customClass: "http-message"
    // });
    ElMessage({
      customClass: "customMsgCls",
      message: "请输入内容",
      type: "error",
      appendTo: document.body
    });
    return;
  }
  if (releaseCategoryNo.value === "") {
    // ElNotification({
    //   message: h("i", { style: "color: red" }, "请选择分类"),
    //   customClass: "http-message"
    // });
    ElMessage({
      customClass: "customMsgCls",
      message: "请选择分类",
      type: "error",
      appendTo: document.body
    });
    return;
  }
  if (formData.project === "") {
    // ElNotification({
    //   message: h("i", { style: "color: red" }, "请输入项目名称"),
    //   customClass: "http-message"
    // });
    ElMessage({
      customClass: "customMsgCls",
      message: "请输入项目名称",
      type: "error",
      appendTo: document.body
    });
    return;
  }
  if (formData.assigneeName === "") {
    // ElNotification({
    //   message: h("i", { style: "color: red" }, "请选择技术员"),
    //   customClass: "http-message"
    // });
    ElMessage({
      customClass: "customMsgCls",
      message: "请选择技术员",
      type: "error",
      appendTo: document.body
    });
    return;
  }
  if (titleText.value === "新增发布") {
    const params = {
      "releaseDTO.loginName": username,
      "releaseDTO.releaseManagerName": userStore.userInfo.fullName,
      "releaseDTO.createdByNo": userStore.userInfo.userId,
      "releaseDTO.piv.approvalNo": 0,
      "releaseDTO.companyNo": 1,
      "releaseDTO.ecategoryNo": releaseCategoryNo.value,
      "releaseDTO.etitle": formData.title,
      "releaseDTO.edesc": content.value,
      "releaseDTO.project": formData.project,
      "releaseDTO.technicianName": formData.assigneeName,
      "releaseDTO.technicianNo": assigneeId.value,
      "releaseDTO.releaseDate": releaseDate.value,
      "releaseDTO.planDate": planDate.value,
      "releaseDTO.version": formData.version,
      "releaseDTO.stage": formData.stage,
      "releaseDTO.priorityNo": proirity.value,
      "releaseDTO.attachmentStr": attachmentStr.value
    };
    try {
      const res = (await addRelease(params)) as any;
      console.log(res);
      if (res) {
        ElMessage.success("发布成功");
        dialogVisible.value = false;
        proTable.value?.getTableList();
        formData.title = "";
        formData.project = "";
        formData.assigneeName = "";
        formData.version = "";
        formData.stage = "";
        content.value = "";
        releaseCategoryNo.value = "";
        proirity.value = "";
        attachmentStr.value = "";
        releaseDate.value = "";
        planDate.value = "";
        assigneeId.value = "";
        releaseSelectValue.value = [];
      }
    } catch (e) {
      ElMessage.error("网络错误");
    }
  } else if (titleText.value === "编辑发布") {
    try {
      const params = {
        "releaseDTO.eno": eno.value,
        "releaseDTO.eventCode": eventCode.value,
        "releaseDTO.loginName": username,
        "releaseDTO.releaseMan": userStore.userInfo.fullName,
        "releaseDTO.createdByNo": userStore.userInfo.userId,
        "releaseDTO.piv.approvalNo": 0,
        "releaseDTO.companyNo": 1,
        "releaseDTO.ecategoryNo": releaseCategoryNo.value,
        "releaseDTO.etitle": formData.title,
        "releaseDTO.edesc": content.value,
        "releaseDTO.project": formData.project,
        "releaseDTO.technicianName": formData.assigneeName,
        "releaseDTO.technicianNo": assigneeId.value,
        "releaseDTO.releaseDate": releaseDate.value,
        "releaseDTO.planDate": planDate.value,
        "releaseDTO.version": formData.version,
        "releaseDTO.stage": formData.stage,
        "releaseDTO.priorityNo": proirity.value,
        "releaseDTO.attachmentStr": attachmentStr.value
      };
      const res = (await editRelease(params)) as any;
      if (res === null) {
        ElMessage.success("编辑发布成功");
        dialogVisible.value = false;
        proTable.value?.getTableList();
        formData.title = "";
        formData.project = "";
        formData.assigneeName = "";
        formData.version = "";
        formData.stage = "";
        content.value = "";
        releaseCategoryNo.value = "";
        proirity.value = "";
        attachmentStr.value = "";
        releaseDate.value = "";
        planDate.value = "";
        assigneeId.value = "";
        releaseSelectValue.value = [];
      }
    } catch (e) {
      ElMessage.error("网络错误");
    }
  }
};
const eno = ref("");
const eventCode = ref("");
const editEvent = async row => {
  console.log(row);
  eno.value = row.eno;
  eventCode.value = row.eventCode;
  dialogVisible.value = true;
  titleText.value = "编辑发布";
  formData.title = row.etitle;
  formData.project = row.project;
  assigneeId.value = row.assigneeNo;
  formData.assigneeName = row.assigneeName;
  releaseDate.value = row.releaseDate;
  planDate.value = row.planDate;
  formData.version = row.version;
  formData.stage = row.stage;
  content.value = row.edesc;
  proirity.value = row.priorityNo;
  releaseCategoryNo.value = row.releaseCategoryNo;
  releaseSelectList.value.forEach(item => {
    console.log(item);
    if (item.attr.cname === row.ecategoryName) {
      releaseSelectValue.value = [item.attr];
      releaseCategoryNo.value = item.attr.id;
    }
  });
  const filePArams = {
    "eventAttachmentDto.eno": row.eno,
    "eventAttachmentDto.eventType": "itsm.release"
  };
  const data = (await findFile(filePArams)) as any;
  if (data) {
    fileList.value = data;
    console.log(fileList.value);
  }
};
//添加编辑弹窗
const dialogVisible = ref(false);
const titleText = ref("");
const addReleaseBtn = () => {
  dialogVisible.value = true;
  titleText.value = "新增发布";
};
//删除发布
const deleteItem = async row => {
  ElMessageBox.confirm("确实要删除选择的数据吗？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true
  })
    .then(async () => {
      let params = "releaseNos=" + row.eno;
      try {
        const data = (await delRelease(params)) as any;
        if (data === null) {
          ElMessage.success("删除成功");
          proTable.value?.clearSelection();
          proTable.value?.getTableList();
        }
      } catch {
        ElMessage.error("此数据存在相关联的数据，不能删除");
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
//批量删除
const delSelectItem = e => {
  console.log(e);
  ElMessageBox.confirm("确实要删除选择的数据吗？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true
  })
    .then(async () => {
      let params = "";
      e.forEach(item => {
        params += "releaseNos=" + item.eno + "&";
      });
      try {
        const data = (await delRelease(params)) as any;
        if (data === null) {
          ElMessage.success("删除成功");
          proTable.value?.clearSelection();
          proTable.value?.getTableList();
        }
      } catch {
        ElMessage.error("此数据存在相关联的数据，不能删除");
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
// 添加附件
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const attachmentList = ref<any>([]);
const attachmentStrArr = ref<any[]>([]);
const attachmentStr = ref("");
const attachmentStrEdit = ref("");
const uploadFileRes = async (param: any) => {
  let res = JSON.parse(JSON.stringify(param));
  attachmentStr.value = "";
  attachmentStrArr.value.push(res.fileName + "==" + res.msg + "==" + res.fileSize + "-s-");
  // attachmentStr.value += res.fileName + "==" + res.msg + "==" + res.fileSize + "-s-";
  attachmentStrArr.value.forEach(item => {
    attachmentStr.value += item;
  });
  console.log(attachmentStr.value);
  attachmentStrEdit.value = res.fileName + "==" + res.msg + "==" + res.fileSize + "-s-";
  let attachment = {
    fileName: res.fileName,
    attachmentStr: attachmentStr.value
  };
  attachmentList.value.push(attachment);
  fileList.value.push({
    attachmentName: res.fileName,
    url: res.msg
  });
  if (titleText.value === "编辑发布") {
    uploadEditAddAttachment();
  }
};
const addAttachment = () => {
  const params = {
    title: "",
    tempApi: uploadFile,
    importApi: uploadFile,
    addAttachmentMethod: uploadFileRes
  };
  dialogRef.value?.acceptParams(params);
};
//编辑添加附件
const uploadEditAddAttachment = async () => {
  const params = {
    creator: username,
    eno: eno.value,
    eventType: "itsm.release",
    attachmentStr: attachmentStrEdit.value
  };
  const res = (await editAddAttachment(params)) as any;
  if (res === null) {
    ElMessage.success("添加附件成功");
    const filePArams = {
      "eventAttachmentDto.eno": eno.value,
      "eventAttachmentDto.eventType": "itsm.release"
    };
    const data = (await findFile(filePArams)) as any;
    if (data) {
      fileList.value = data;
      console.log(fileList.value);
    }
  }
};
//查看详情
const dialogVisible2 = ref(false);
// 添加接口定义
interface ReleaseDetail {
  companyName: string;
  eventCode: string;
  etitle: string;
  ecategoryName: string;
  edesc: string;
  project: string;
  statusName: string;
  assigneeName: string;
  releaseDate: string;
  planDate: string;
  version: string;
  stage: string;
  createdByName: string;
  priorityName: string;
  solutions: string;
  pid: string;
  statusCode: string;
  assigneeLoginName: string;
}

// 修改 formDataDetail 的类型
// let formDataDetail = reactive<ReleaseDetail>({} as ReleaseDetail);
const formDataDetail = ref<any>({});
const fileList = ref<any>([]);
const assigneeName = ref("");
//流程按钮
const processBtn = ref<any>([]);
const pid = ref("");
const taskId = ref("");
const activityName = ref("");
const flowActivityId = ref();
const seeDetails = async row => {
  console.log(eno.value);
  titleText.value = "发布详情";
  eno.value = row.eno;
  const res = (await getReleaseInfo(row.eno)) as any;
  console.log(res);
  if (res) {
    dialogVisible2.value = true;
    assigneeName.value = res.assigneeName;
    // formDataDetail = reactive(res);
    formDataDetail.value = {
      ...res
    };
    if (formDataDetail.value.edesc.includes("<img")) {
      formDataDetail.value.edesc = formDataDetail.value.edesc.replace(
        /<img[^>]/g,
        '<img style="width: 120px;border: 1px solid #ccc;margin-right: 10px;"'
      );
    }
    pid.value = res.pid;
    if (res.pid != "" && res.statusCode !== "release_close" && res.statusCode !== "release_processReopen") {
      const process = await processDetail(res.pid);
      console.log(process);
      pid.value = res.pid;
      taskId.value = process[0].flowTaskDTO[0].taskId;
      activityName.value = process[0].activityName;
      flowActivityId.value = process[0].flowTaskDTO[0].flowActivityDTO.id;
      processBtn.value = process[0].flowTaskDTO[0].outcomes;
    } else {
      processBtn.value = [];
    }
  }
  const filePArams = {
    "eventAttachmentDto.eno": row.eno,
    "eventAttachmentDto.eventType": "itsm.release"
  };
  const data = (await findFile(filePArams)) as any;
  if (data) {
    fileList.value = data;
    console.log(fileList.value);
  }
};
//描述包含图片点击预览
const previewImgUrl = ref("");
const previewImg = ref(false);
const previewImage = event => {
  const target = event.target;
  console.log(target.tagName);
  if (target.tagName === "IMG") {
    previewImg.value = true;
    previewImgUrl.value = target.src;
  }
};
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//提交计划描述
const subSolutions = async () => {
  const params = {
    "releaseDetailsDTO.solutions": formDataDetail.value.solutions,
    "releaseDetailsDTO.eno": eno.value,
    "releaseDetailsDTO.loginName": userStore.userInfo.loginName
  };
  // const res = (await submitReleaseInfo(params)) as any;
  // if (res) {
  //   console.log(res);
  // }
  submitReleaseInfo(params).then(res => {
    ElMessage({
      customClass: "customMsgCls",
      message: "保存成功",
      type: "success",
      appendTo: document.body
    });
  });
};
//删除附件
const delFileOption = async (e, index) => {
  const params = {
    ids: e,
    eno: eno.value
  };
  // const res = (await delFile(params)) as any;
  // if (res === null) {
  // }
  ElMessageBox.confirm("确实要删除选择的数据吗？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true
  })
    .then(async () => {
      try {
        if (titleText.value === "新增发布") {
          // 1. 删除 attachmentStrArr.value 的对应项
          attachmentStrArr.value.splice(index, 1);
          // 2. 删除 fileList.value 的对应项
          fileList.value.splice(index, 1);
          // 3. 重新拼接 attachmentStr.value
          attachmentStr.value = "";
          attachmentStrArr.value.forEach(item => {
            attachmentStr.value += item;
          });
          console.log(attachmentStr.value);
        } else {
          const data = (await delFile(params)) as any;
          if (data === null) {
            ElMessage.success("删除成功");
            const filePArams = {
              "eventAttachmentDto.eno": eno.value,
              "eventAttachmentDto.eventType": "itsm.release"
            };
            const data = (await findFile(filePArams)) as any;
            if (data) {
              fileList.value = data;
              console.log(fileList.value);
            }
          }
        }
      } catch {
        ElMessage.error("此数据存在相关联的数据，不能删除");
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
//流程动作
//指派技术员
const dialogSendAssignee = ref(false);
const assigneeForm = reactive({
  assigneeName: "",
  remark: ""
});
const technicianNo = ref("");
const userListInitParam = reactive({
  belongGroupIds: ""
});
const getUser = async type => {
  if (type === "指派技术员") {
    dialogAssigneeTable.value = true;
  } else if (type === "重新指派") {
    dialogReAssigneeTable.value = true;
  }
  const params = {
    userName: formDataDetail.value.assigneeLoginName
  };
  const res = (await getAssignUser(params)) as any;
  console.log(res);
  userListInitParam.belongGroupIds = "";
  res.belongsGroupIds.forEach(item => {
    userListInitParam.belongGroupIds += "userQueryDto.belongsGroupIds=" + item + "&";
  });
  console.log(userListInitParam.belongGroupIds);
  // userProTable.value?.getTableList();
};
const userProTable = ref<ProTableInstance>();
const userProTable2 = ref<ProTableInstance>();
const dialogAssigneeTable = ref(false);
const userColumns = reactive<ColumnProps[]>([
  { prop: "loginName", label: "登录名" },
  { prop: "fullName", label: "名字" },
  {
    prop: "userState",
    label: "休假状态",
    render(h) {
      switch (h.row.userState) {
        case true:
          return "值班中";
        case false:
          return "休假中";
        default:
          return "未知";
      }
    }
  },
  { prop: "belongsGroupStr", label: "所属机构" },
  { prop: "operation", label: "操作", fixed: "right" }
]);
//任务重新指派
const dialogTaskResent = ref(false);
const dialogReAssigneeTable = ref(false);
const reAssigneeForm = reactive({
  assigneeNo: "",
  assigneeName: "",
  remark: ""
});
const chooseUser = (type, row) => {
  console.log(type, row);
  if (type === "指派技术员") {
    console.log(1);
    assigneeForm.assigneeName = row.fullName;
    technicianNo.value = row.userId;
    dialogAssigneeTable.value = false;
  }
  if (type === "重新指派") {
    console.log(2);
    reAssigneeForm.assigneeName = row.fullName;
    reAssigneeForm.assigneeNo = row.userId;
    dialogReAssigneeTable.value = false;
  }
};
const sendToTec = async () => {
  const params = {
    "releaseDTO.eno": eno.value,
    "releaseDTO.pid": "",
    "releaseDTO.lastUpdater": userStore.username,
    "releaseDTO.currentUser": userStore.username,
    "releaseDTO.currentUserFullName": userStore.userInfo.fullName,
    "releaseDTO.optType": "release_action_assign",
    "releaseDTO.technicianNo": technicianNo.value,
    "releaseDTO.remark": assigneeForm.remark
  };
  const res = (await assignUser(params)) as any;
  if (res === null) {
    ElMessage.success("指派成功");
    assigneeForm.remark = "";
    dialogSendAssignee.value = false;
    seeDetails({ eno: eno.value });
  }
};

const reAssignUserBtn = async () => {
  dialogTaskResent.value = true;
  const params = {
    "flowActivityDTO.id": flowActivityId.value
  };
  const res = (await reAssignUserApi(params)) as any;
  if (res) {
  }
};
const subResent = async () => {
  const params = {
    "processHandleDTO.pid": pid.value,
    "processHandleDTO.taskId": taskId.value,
    "processHandleDTO.eno": eno.value,
    "processHandleDTO.module": "release",
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.handleType": "TaskReAssigne",
    "processHandleDTO.assignType": assignType.value,
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.assigneeNo": reAssigneeForm.assigneeNo,
    "processHandleDTO.remark": reAssigneeForm.remark
  };
  try {
    const res = (await reAssignUser(params)) as any;
    if (res === null) {
      ElMessage.success("操作成功");
      dialogTaskResent.value = false;
    }
  } catch (err) {
    ElMessage.error("操作失败");
    dialogTaskResent.value = false;
  }
};
//开启流程
const dialogOpenProcess = ref(false);
const openUserForm = reactive({
  assigneeName: "",
  assigneeNo: "",
  remark: ""
});
const assignType = ref("");
const activityType = ref("");
const startProcess = async () => {
  dialogOpenProcess.value = true;
  const params = {
    "processHandleDTO.eno": eno.value,
    "processHandleDTO.isOpenProcess": true,
    "processHandleDTO.module": "release"
  };
  const res = (await getOpenUser(params)) as any;
  openUserForm.assigneeName = res.assigneeName;
  openUserForm.assigneeNo = res.assigneeId;
  assignType.value = res.flowActivityDTO.assignType;
  activityType.value = res.nextFlowActivityDTO.activityType;
};
const openProcess = async () => {
  const params = {
    "processHandleDTO.eno": eno.value,
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.assignType": assignType.value,
    "processHandleDTO.nextActivityType": activityType.value,
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.approverTask": false,
    "processHandleDTO.module": "release",
    "processHandleDTO.leaderNum": 0,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.mailHandlingProcess": false,
    "processHandleDTO.remark": openUserForm.remark,
    "processHandleDTO.assigneeNo": openUserForm.assigneeNo,
    "processHandleDTO.approverResult": true
  };
  const res = (await openProcessAction(params)) as any;
  if (res === null) {
    ElMessage.success("开启流程成功");
    dialogOpenProcess.value = false;
    seeDetails({ eno: eno.value });
  }
};
//流程动作
const dialogActionProcess = ref(false);
const actionTitle = ref("");
const ActionUserForm = reactive({
  groupName: "",
  groupNo: "",
  assigneeName: "",
  assigneeNo: "",
  remark: ""
});
const Gdisbled = ref(false);
const Udisbled = ref(false);
const outcomeName = ref("");
const actionProcess = async e => {
  actionTitle.value = "动作-" + e;
  outcomeName.value = e;
  dialogActionProcess.value = true;
  const params = {
    "processHandleDTO.eno": eno.value,
    "processHandleDTO.isOpenProcess": true,
    "processHandleDTO.module": "release"
  };
  const res = (await getOpenUser(params)) as any;
  ActionUserForm.assigneeName = res.assigneeName;
  ActionUserForm.assigneeNo = res.assigneeId;
  assignType.value = res.flowActivityDTO.assignType;
  activityType.value = res.nextFlowActivityDTO.activityType;
  if (e === "取消") {
    Gdisbled.value = true;
    Udisbled.value = true;
  } else {
    Gdisbled.value = res.flowActivityDTO.allowUdateDefaultAssigneeGroup;
    Udisbled.value = res.flowActivityDTO.allowUdateDefaultAssignee;
  }
};
const subActionProcess = async () => {
  const params = {
    "processHandleDTO.pid": pid.value,
    "processHandleDTO.taskId": taskId.value,
    "processHandleDTO.eno": eno.value,
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.assignType": assignType.value,
    "processHandleDTO.outcome": outcomeName.value,
    "processHandleDTO.nextActivityType": activityType.value,
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.flowActivityId": flowActivityId.value,
    "processHandleDTO.approverTask": false,
    "processHandleDTO.module": "release",
    "processHandleDTO.variablesAssigneeType": "",
    "processHandleDTO.leaderNum": 0,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.variablesAssigneeGroupNo": 0,
    "processHandleDTO.variablesAssigneeGroupName": "",
    "processHandleDTO.mailHandlingProcess": false,
    "processHandleDTO.activityName": activityName.value,
    "processHandleDTO.remark": ActionUserForm.remark,
    "processHandleDTO.groupNo": ActionUserForm.groupNo,
    assigneeGroupName: ActionUserForm.groupName,
    "processHandleDTO.assigneeNo": ActionUserForm.assigneeNo,
    assigneeName: ActionUserForm.assigneeName,
    "processHandleDTO.approversMemberSet": "",
    "processHandleDTO.approverResult": true,
    "processHandleDTO.emailAddress": ""
  };
  try {
    const res = (await actionProcessApi(params)) as any;
    if (res == null) {
      ElMessage.success("操作成功");
      dialogActionProcess.value = false;
      seeDetails({ eno: eno.value });
    }
  } catch (e) {
    ElMessage.error("网络错误");
    dialogActionProcess.value = false;
  }
};
//技术组下拉框
const GroupSelectValue = ref();
const groupSelectList = ref<any>([]);
const props2 = {
  checkStrictly: true,
  label: "data",
  value: "attr"
};
const getGroupList = async () => {
  const data = (await getUserDepartment()) as any;
  if (data) {
    console.log(data[0].children[1]);
    groupSelectList.value = [data[0].children[1]];
  }
};
const changerGroup = (val: any) => {
  console.log(val);
  if (val === null) {
    ActionUserForm.groupName = "";
    ActionUserForm.groupNo = "";
    ActionUserForm.assigneeName = "";
    ActionUserForm.assigneeNo = "";
  } else {
    ActionUserForm.groupName = val[val.length - 1].orgName;
    ActionUserForm.groupNo = val[val.length - 1].orgNo;
    ActionUserForm.assigneeName = "";
    ActionUserForm.assigneeNo = "";
  }
};
//选择技术员
const dialogActionAssigneeTable = ref(false);
const getActionUser = async () => {
  dialogActionAssigneeTable.value = true;
  if (ActionUserForm.groupName === "") {
    const params = {
      userName: formDataDetail.value.assigneeLoginName
    };
    const res = (await getAssignUser(params)) as any;
    console.log(res);
    userListInitParam.belongGroupIds = "";
    res.belongsGroupIds.forEach(item => {
      userListInitParam.belongGroupIds += "userQueryDto.belongsGroupIds=" + item + "&";
    });
  } else {
    userListInitParam.belongGroupIds = "userQueryDto.belongsGroupIds=" + ActionUserForm.groupNo;
    console.log(userListInitParam.belongGroupIds);
  }

  // userProTable.value?.getTableList();
};
const chooseActionUser = row => {
  ActionUserForm.assigneeName = row.fullName;
  ActionUserForm.assigneeNo = row.userId;
  dialogActionAssigneeTable.value = false;
};
//重新开启
const reStartDialog = ref(false);
const reStartForm = reactive({
  remark: ""
});
const subReStartProcess = async () => {
  if (reStartForm.remark === "") {
    ElMessage.error("请输入开启备注");
    return;
  }

  const params = {
    "releaseDTO.eno": eno.value,
    "releaseDTO.pid": pid.value,
    "releaseDTO.lastUpdater": userStore.username,
    "releaseDTO.currentUser": userStore.username,
    "releaseDTO.currentUserFullName": userStore.userInfo.fullName,
    "releaseDTO.optType": "release_action_reopen",
    "releaseDTO.remark": reStartForm.remark
  };
  try {
    const res = (await reStartProcess(params)) as any;
    if (res === null) {
      ElMessage.success("操作成功");
      reStartDialog.value = false;
      seeDetails({ eno: eno.value });
    }
  } catch (e) {
    ElMessage.error("网络错误");
    reStartDialog.value = false;
  }
};
//流程跟踪
const dialogFlowChart = ref(false);
const flowChart = ref("");
const getFlowChart = async () => {
  console.log(pid.value);
  dialogFlowChart.value = true;
  const res = (await getProcessInfo(pid.value)) as any;
  let html = res.toString();
  let vhtml = html.replaceAll("jbpm!getProcessImage.action", "api/jbpm!getProcessImage.action");
  flowChart.value = vhtml;
};
// 选择部门
const selectDepartmentType = ref("");
const selectDepartmentTitle = ref("");
const selectDepartmentMask = ref();
const assigneeGroupName = ref("");
const selectDepartment = (type: string, title: string) => {
  selectDepartmentType.value = type;
  selectDepartmentTitle.value = title;
  selectDepartmentMask.value?.open();
};
const departmentChange = e => {
  console.log(e.orgName);
  switch (selectDepartmentType.value) {
    // case "filterForm.requestorOrgNo":
    //   requestorOrgName.value = e.orgName;
    //   filterForm.requestorOrgNo = e.orgNo;
    //   break;
    case "ActionUserForm.assigneeGroupNo":
      ActionUserForm.groupName = e.orgName;
      ActionUserForm.groupNo = e.orgNo;
      break;
    // case "conditionForm.propValue":
    //   conditionForm.propDisplayValue = e.orgName;
    //   conditionForm.propValue = e.orgNo;
    //   break;
    default:
      break;
  }
};
//关闭流程弹窗
const closeActionProcess = () => {
  ActionUserForm.groupName = "";
  ActionUserForm.groupNo = "";
  ActionUserForm.assigneeName = "";
  ActionUserForm.assigneeNo = "";
};
</script>
<style lang="scss" scoped>
.http-message {
  z-index: 20011 !important;
}
h3 {
  margin: 0;
}
p {
  margin: 0;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.item {
  display: flex;
  width: 90%;
  font-size: 14px;
  border: 1px solid #cbcaca;
  border-bottom: none;
}
.item_label {
  display: inline-block;
  width: 30%;
  padding-left: 10px;
  font-weight: bold;
  line-height: 34px;
  color: #000000;
  vertical-align: middle;
  background: #e5e5e5;
  border: 1px solid #e5e5e5;
}
.item-content {
  display: inline-block;
  width: 70%;
  padding: 0 5px;
  line-height: 34px;
  vertical-align: middle;
}
.customMsgCls {
  z-index: 20011 !important;
}
</style>
